<template>
  <dw-page-warpper>
    <dw-menu-datagrid-form
      ref="menuDatagridFormRef"
      :columns="columns"
      :operation-items="operationItems"
      :operation-Width="200"
      :render-form-title="renderFormTitle"
      :data-grid-title="dataGridTitle"
      :get-page-http-config="getPageHttpConfig"
      :del-info-http-config="delInfoHttpConfig"
      :del-page-http-config="delListHttpConfig"
      :get-info-http-config="getInfoHttpConfig"
      :add-info-http-config="addInfoHttpConfig"
      :update-info-http-config="updateInfoHttpConfig"
    >
      <template #judgmentFlag="{ scope }">
        <el-tag type="danger" v-if="scope.row.judgmentFlag === 0" dark>否</el-tag>
        <el-tag type="primary" v-else dark>是</el-tag>
      </template>
      <template #debugger="{ scope }">
        <el-button type="success" icon="CaretRight" link v-if="scope.row.judgmentFlag === 0" @click="showDebugger(scope.row)">调试</el-button>
      </template>
      <template #formSlot>
        <el-descriptions :column="4" border>
          <el-descriptions-item label-align="right" label-width="150px" :span="2">
            <template #label>
              <div class="required">接口名称</div>
            </template>
            <div>
              <el-form-item
                prop="apiName"
                :rules="[
                  {
                    required: true,
                    message: '接口名称不能为空',
                    trigger: 'blur',
                  },
                ]"
              >
                <el-input v-model="formData.apiName" placeholder="请输入接口名称..."></el-input>
              </el-form-item>
            </div>
          </el-descriptions-item>
          <el-descriptions-item label-align="right" label-width="150px" :span="2">
            <template #label>
              <div>代码片段</div>
            </template>
            <div>
              <el-form-item prop="judgmentFlag" :rules="[]">
                <el-switch v-model="formData.judgmentFlag" :active-value="1" :inactive-value="0"></el-switch>
              </el-form-item>
            </div>
          </el-descriptions-item>
          <el-descriptions-item label-align="right" label-width="150px" :span="4">
            <template #label>
              <div>接口路径</div>
            </template>
            <div>
              <el-form-item prop="apiUrl">
                <el-input
                  v-model="formData.apiUrl"
                  :rules="[
                    {
                      required: true,
                      message: '接口Url不能为空',
                      trigger: 'blur',
                    },
                  ]"
                />
              </el-form-item>
            </div>
          </el-descriptions-item>
          <el-descriptions-item label-align="right" label-width="150px" :span="4">
            <template #label>
              <div>排序号</div>
            </template>
            <div>
              <el-form-item prop="sortNo" :rules="[]">
                <el-input-number v-model="formData.sortNo"></el-input-number>
              </el-form-item>
            </div>
          </el-descriptions-item>
          <el-descriptions-item label-align="right" label-width="150px" :span="4">
            <template #label>
              <div>Mock返回值</div>
            </template>
            <div>
              <el-form-item prop="mockConfig">
                <basic-editor ref="jsonRef" v-model="formData.mockConfig" style="height: 500px"></basic-editor>
              </el-form-item>
            </div>
          </el-descriptions-item>
        </el-descriptions>
      </template>
    </dw-menu-datagrid-form>
  </dw-page-warpper>
  <api-debugger ref="apiDebuggerRef"></api-debugger>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import type {
  IColumn,
  IDelInfoHttpConfig,
  IDelListHttpConfig,
  IGetPageHttpConfig,
  IUpdateInfoHttpConfig,
  IAddInfoHttpConfig,
  IHttpConfig,
  IOperationItem,
  IGetInfoHttpConfig,
} from '@/types/menu-datagrid-form';
import BasicEditor from '@/components/code-editor/basic-editor/index.vue';
import type { IApiMock } from './api-mock';
import Mousetrap from 'mousetrap';
import { onBeforeMount } from 'vue';
import ApiDebugger from '../../tools/api-debuger/index.vue';
import type { IRunParameter } from '../../tools/api-debuger/api-debuger';
import { nanoid } from 'nanoid';
defineOptions({
  name: 'SysProject',
});
const formData = ref<IApiMock>({
  id: '',
  apiName: '',
  apiUrl: '',
  mockConfig: '',
  judgmentFlag: 1,
});
const apiDebuggerRef = ref();
const dataGridTitle = 'Mock配置列表';
const operationItems = ref<IOperationItem<IApiMock>[]>([
  {
    code: 'edit',
    extendFlag: true, //如果code有值 extendFlag=true 才有效
  },
  {
    slotName: 'debugger',
    // code: 'debugger',
    // extendFlag: true, //如果code有值 extendFlag=true 才有效
  },
  {
    code: 'delInfo',
    extendFlag: true, //如果code有值 extendFlag=true 才有效
  },
]);

const renderFormTitle = (stateValue: 'add' | 'edit', data: IApiMock): string => {
  if (stateValue === 'add') {
    return 'Mock配置';
  } else {
    return data.apiName;
  }
};
const columns = ref<IColumn[]>([
  {
    prop: 'id',
    label: 'ID',
    width: 360,
    align: 'left',
  },
  {
    prop: 'apiName',
    label: '接口名称',
    width: 200,
    align: 'left',
  },
  {
    prop: 'judgmentFlag',
    label: '代码片段',
    width: 90,
    align: 'center',
    slotName: 'judgmentFlag',
  },
  {
    prop: 'apiUrl',
    label: '接口路径',
    align: 'left',
  },
  {
    prop: 'sortNo',
    label: '排序',
    align: 'right',
    width: 100,
  },
]);
const delInfoHttpConfig: IDelInfoHttpConfig = {
  url: '/admin-api/api/mock/#{id}',
  delInfoMsgEmphasize: '#{apiName}',
};
const delListHttpConfig: IDelListHttpConfig = {
  url: '/admin-api/api/mock/list',
};

const getPageHttpConfig: IGetPageHttpConfig<IApiMock> = {
  url: '/admin-api/api/mock/page/list',
};
const getInfoHttpConfig: IGetInfoHttpConfig<IApiMock> = {
  url: '/admin-api/api/mock/#{id}',
};
const addInfoHttpConfig: IAddInfoHttpConfig<IApiMock> = {
  url: '/admin-api/api/mock',
};
const updateInfoHttpConfig: IUpdateInfoHttpConfig<IApiMock> = {
  url: '/admin-api/api/mock',
};
const menuDatagridFormRef = ref();
onMounted(() => {
  Mousetrap.bind('ctrl+alt+r', () => {
    const rowdata = menuDatagridFormRef.value.getSelectionRow();
    showDebugger(rowdata);
  });
});

const showDebugger = (rowdata: IApiMock) => {
  const apiUrl = rowdata.apiUrl;
  const runParameter: IRunParameter = {
    requestId: nanoid(),
    protocol: 'http',
    domain: window.location.host.split(':')[0],
    contextPath: '/admin-api/mock',
    port: 8082, //发布这个要改
    path: apiUrl,
    method: 'POST',
  };
  apiDebuggerRef.value.show(runParameter);
};
onBeforeMount(() => {
  Mousetrap.unbind('ctrl+alt+r');
});
</script>
